<template>
    <div class="basicPart">
        <div class="first_block">
            <el-form label-width="120px">
                <backgComponent @change="bgChange" :bgdata="d3Config">
                    <el-button slot="right" style="margin-left:10px" type="danger" @click="goToShow">高级编辑</el-button>
                </backgComponent>                
            </el-form>
        </div>
        <div class="second_block">
            <el-row>
                <el-col :span="7" class="screenHandle">
                    <el-button type="primary" class="newScrollScreen " icon="el-icon-plus" round @click.stop="openSettingDialog(false)">添加滚屏</el-button>
                    <el-tooltip class="item" effect="dark" content="帮助" placement="bottom">
                        <span class="iconfont ss-bangzhu"></span>
                    </el-tooltip>
                </el-col>
            </el-row>
        </div>
        <screenList ref="screenList" @savePageData = "savePage"></screenList>
        <modal :visible="showSet" :width="850" @close="showSet = false;activeName = 1" class="data-modal" :title="msg" id="scrollModal">
            <el-steps :active="activeName" finish-status="success" simple style="margin:0px 0px 20px 0px;">
                <el-step title="展示字段设置" ></el-step>
                <el-step title="功能设置" ></el-step>
            </el-steps>
            <el-form :model="sourceData" :rules="rules" ref="ruleForm" v-if="activeName ==1">
                <div class="showFont">
                    <el-row>
                        <el-col :span="23" style="margin-bottom:10px">
                            <el-button plain icon="el-icon-plus" class="newScrollScreen1" round  @click="addField">新增字段</el-button>
                            <el-button plain round class="newScrollScreen2" @click.prevent="delField" :disabled="checkedField.length<1">删除</el-button>
                            <el-tooltip class="item" effect="dark" content="帮助" placement="bottom">
                                <span class="iconfont ss-bangzhu" style="float:right;"></span>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <el-row v-for="(field,index) in sourceData.fields" :key="field.id">
                        <el-col :span="24">
                            <el-checkbox v-model="checkedField" :label="field.id" style="margin-right:10px;">{{''}}</el-checkbox>
                            <el-form-item label="" :prop="'fields.'+ index + '.name'" :rules="rules.name" style="width: 120px;margin-right: 20px;display: inline-block; ">
                                <el-input v-model="field.name" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-select size="small" v-model="field.inputType" style="width:120px;margin-right:15px;">
                                <el-option v-for="c in dsConfig.inputTypeOptions" :key="c.value" :label="c.name" :value="c.value"></el-option>
                            </el-select>
                            <div style="display:inline-block;">
                                <el-select size="small" v-model="field.fieldOptions" style="width:120px;margin-right:15px;">
                                    <el-option v-for="c in dsConfig.types" :key="c.key" :label="c.name" :value="c.key"></el-option>
                                </el-select>
                            </div>                             
                            <div v-if="field.inputType=='select'" style="display:inline-block;">
                                <el-select size="small" v-model="field.inputData" style="width:120px;margin-right:12px;">
                                    <el-option v-for="data in field.inputDataList" :key="data.key" :label="data.label" :value="data.key"></el-option>
                                </el-select>
                                <el-tooltip class="item" effect="dark" content="录入下拉框选项值" placement="top">
                                    <el-button type="primary" icon="el-icon-edit" circle @click.stop="openInputModal(field.inputDataList,field.id,field.fieldOptions)"></el-button>
                                </el-tooltip>
                                <!-- <el-input v-model="field.name" autocomplete="off"></el-input> -->
                            </div>                           
                            <el-switch style="margin-left:20px;"
                                       v-model="field.requisite"
                                       active-text="必填"
                                       inactive-text="不必填">
                            </el-switch>
                        </el-col>
                        <el-col :span="24"><el-divider></el-divider></el-col>
                    </el-row>
                </div>
            </el-form>
            <div class="functionSetting" v-if="activeName ==2">
                <el-form :model="sourceData.form" ref="formRule" :rules="rules" label-width="120px">
                    <el-form-item label="滚屏名称：" prop="name">
                        <el-input placeholder="" style="width:260px" v-model="sourceData.form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="播报类型：">
                        <el-radio-group v-model="sourceData.form.type" style="width:70%;">
                            <el-col :span="5">
                                <el-radio label="循环滚动" style="margin-top: 9px;"></el-radio>
                            </el-col>
                            <el-col :span="7">
                                <img class="bg-img" :src="sourceData.bgImage" style="width:100px" />
                            </el-col>
                            <el-col :span="5">
                                <el-radio label="显示一次" style="margin-top: 9px;"></el-radio>
                            </el-col>
                            <el-col :span="7">
                                <img class="bg-img" :src="sourceData.bgImage" style="width:100px"/>
                            </el-col>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="滚动方向：">
                        <el-radio-group v-model="sourceData.form.direction">
                            <el-radio label="由上至下"></el-radio>
                            <el-radio label="由下至上"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="放大比例：">
                        <el-col :span="12">
                            <el-radio-group v-model="sourceData.form.scale">
                                <el-radio label="1.2X"></el-radio>
                                <el-radio label="1.5X"></el-radio>
                                <el-radio label="2X"></el-radio>
                                <el-radio label="3X"></el-radio>
                            </el-radio-group>
                        </el-col>
                        <el-col :span="10"><label class="reminder">播报信息滚动到中间时放大的比例</label></el-col>
                    </el-form-item>
                    <el-form-item label="滚动速度：">
                        <el-radio-group v-model="sourceData.form.speed">
                            <el-radio label="很慢"></el-radio>
                            <el-radio label="慢"></el-radio>
                            <el-radio label="中等"></el-radio>
                            <el-radio label="快"></el-radio>
                            <el-radio label="很快"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="放大效果：">
                        <el-col :span="10">
                            <el-select v-model="sourceData.form.zoom" placeholder=""> <!--aniEffectsListTwo-->
                                <el-option v-for="item in dsConfig.aniEffectsListTwo" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="14"><label class="reminder">播报信息滚动到中间时放大的动画设置，可提升视觉效果</label></el-col>
                    </el-form-item>
                    <el-form-item label="缩小效果：" v-show="false">
                        <el-col :span="10">
                            <el-select v-model="sourceData.form.shrink" placeholder="">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="14"><label class="reminder">播报信息放大后缩小到初始大小的动画设置，可提升视觉效果</label></el-col>
                    </el-form-item>
                    <el-form-item label="播报范围：">
                        <el-col :span="4" style="height:60px;">
                            <el-image style="height:98%;" :src="sourceData.form.broadcastSrc" lazy></el-image>
                        </el-col>
                        <el-col :span="4">
                            <el-link type="primary" style="margin:0px 15px;" @click.stop="placeModal=true">选择</el-link>
                            <el-tooltip class="item" effect="dark" content="帮助" placement="bottom">
                                <span class="iconfont ss-bangzhu"></span>
                            </el-tooltip>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="播报信息样式：">
                        <el-col :span="24" class="broadMsg">
                            <div v-html="sourceData.form.broadMsg">
                                {{sourceData.form.broadMsg}}
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <el-button plain class="newScrollScreen1" round @click.stop="openStyleModal(1)">定义样式</el-button>
                        </el-col>
                        <el-col :span="4" >
                            <el-tooltip class="item" effect="dark" content="帮助" placement="bottom">
                                <span class="iconfont ss-bangzhu"></span>
                            </el-tooltip>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="播报特效：">
                        <el-col :span="4">{{sourceData.form.effects}}</el-col>
                        <el-col :span="4">
                            <el-link type="primary">特效库</el-link>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-switch
                                v-model="sourceData.form.isEnterData"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                        </el-switch>
                        <label style="margin-left:15px;color:#606266">是否允许观众录入数据</label>
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item label="无播报提示：">
                        <styleSettingTwo :toChild="sourceData.form.noneBroadRem"></styleSettingTwo> <!--@changeMsg='perviewMsg'-->
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="2">
                            <el-button plain class="newScrollScreen1" round @click="addAggreFields">添加聚合</el-button>
                        </el-col>
                        <el-col :span="2" style="text-align:right;">
                            <el-tooltip class="item" effect="dark" content="帮助" placement="bottom">
                                <span class="iconfont ss-bangzhu"></span>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <el-row class="cardShadow" v-for="(aggre,index) in sourceData.aggregation" :key="aggre.id">
                        <el-form-item label="字段：" >
                            <el-col :span="22">
                                <el-select v-model="aggre.fieldsFlag" placeholder="" @change="setAggreType(aggre.fieldsFlag,aggre.id)"> <!--this.sourceData.fields-->
                                    <el-option v-for="item in sourceData.fields" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="2" style="text-align:right;line-height: 12px;font-size:18px;">
                                <span @click="delAggre(aggre.id)">
                                    <i class="el-icon-close"></i>
                                </span>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="类型：" v-if="aggre.fieldsFlag">
                            <div v-for="item in dsConfig.fields[aggre.fieldOptions]" :key="item.id" style="display: inline-block;padding-right:20px;">
                                <el-radio-group v-model="aggre.ctype" v-if="aggre.fieldOptions" @change="setFeldsType(item.name,aggre.id)">
                                    <el-radio :label="item.id">{{item.name}}</el-radio>
                                </el-radio-group>
                            </div>
                        </el-form-item>
                        <el-form-item label="样式：">
                            <el-col :span="24" v-html="aggre.previewHtml" class="broadMsg">
                                {{aggre.previewHtml}}
                            </el-col>
                            <el-col :span="5">
                                <el-button plain class="newScrollScreen1" round @click.stop="openStyleModal(2,aggre.domains,index,sourceData.fields,aggre.fieldsFlag)">定义样式</el-button>
                            </el-col>
                            <el-col :span="4" >
                                <el-tooltip class="item" effect="dark" content="帮助" placement="bottom">
                                    <span class="iconfont ss-bangzhu"></span>
                                </el-tooltip>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="位置：">
                            <el-col :span="5" style="height:70px;">
                                <svg class="icon" aria-hidden="true" style="width:114px;height:100%;">
                                    <use :xlink:href="aggre.icon"></use>
                                </svg>
                            </el-col>
                            <el-col :span="4">
                                <el-link type="primary" style="margin-right:15px;" @click.stop="openSecondPlaceModal(true,aggre.id,aggre.fieldsPosition)">选择</el-link>
                                <el-tooltip class="item" effect="dark" content="帮助" placement="bottom">
                                    <span class="iconfont ss-bangzhu"></span>
                                </el-tooltip>
                            </el-col>
                        </el-form-item>
                    </el-row>
                </el-form>
            </div>
            <el-row>
                <el-button type="primary" round @click="nextStep('ruleForm')" v-show="activeName==1" :disabled="sourceData.fields.length<1" style="float:right;margin-right:15px;padding:8px 25px;">下一步</el-button>
                <el-button type="primary" round @click.stop="onSubmit('formRule')" v-show="activeName==2" :loading="submitData" style="float:right;margin-right:15px;padding:8px 26px;">确定</el-button>
                <el-button type="info" @click="cancel" round style="float:right;margin-right:20px;padding:8px 26px;">取 消</el-button>
                <el-button type="primary" @click="activeName=1" round v-show="activeName==2" style="background:#5cb87a;padding:8px 25px;border-color:#5cb87a;">上一步</el-button>
            </el-row>
        </modal>
        <modal :visible="placeModal" :width="900" @close="placeModal = false" class="data-modal" title="位置选择">
            <el-row id="btsAreaPos">
                <el-col :span="6" v-for="item in dsConfig.placeList" :key="item.id" style="padding: 5px 0px;text-align:center">
                    <el-radio-group v-model="sourceData.form.broadcastPlace" @change="placeChoice(item.text,true,item.src)">
                        <el-image :key="item.src" :src="item.src" lazy></el-image>
                        <el-radio :label="item.text">{{item.text}}</el-radio>
                    </el-radio-group>
                </el-col>
                <el-col :span="24" style="text-align:center;">
                    <el-button type="primary" round @click="placeModal = false" style="padding:8px 26px;margin-top:10px;">确定</el-button>
                </el-col>                
            </el-row>
        </modal>
        <modal :visible="secondPlaceModal" :width="900" @close="secondPlaceModal = false" class="data-modal" title="位置选择">
            <el-row id="btsAreaPos1">
                <el-col :span="6" v-for="item in dsConfig.places" :key="item.id" style="padding:0px;text-align:center">
                    <el-radio-group v-model="place" @change="placeChoice(item.name,false,item.icon)"> <!---->
                        <div style="width:100%;height:70px;">
                            <svg class="icon" aria-hidden="true">
                                <use :xlink:href="item.icon"></use>
                            </svg>
                        </div>
                        <el-radio :label="item.name">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-col>
                <el-col :span="24" style="text-align:center;">
                    <el-button type="primary" round @click="secondPlaceModal = false" style="padding:8px 26px;margin-top:10px;">确定</el-button>
                </el-col>
            </el-row>
        </modal>
        <modal :visible="inputDataModal" :width="500" @close="inputDataModal = false" class="data-modal" title="录入下拉框数据">
            <div class="inputDataModal">
                <el-form ref="optionsForm" label-position="top">
                    <el-col :span="24">
                        <el-form-item label="选项名称：" style="display:inline-block;width:70%">
                            <el-input v-if="currentselectObj.currenInputType ==='text'" v-model="currentselectObj.selectName" class="inputName" autocomplete="off"></el-input>
                            <el-input-number v-if="currentselectObj.currenInputType ==='number'" controls-position="right" v-model="currentselectObj.selectName"></el-input-number>                            
                            <el-date-picker
                                v-if="currentselectObj.currenInputType ==='date'"
                                size="small"
                                v-model="currentselectObj.selectName"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd"
                            ></el-date-picker>                                                        
                        </el-form-item>
                        <el-button type="primary" round @click="addOptions()" style="padding:8px 25px;margin-left:15px;">添加</el-button>
                        <!--:disabled=""-->
                    </el-col>
                    <el-form-item label="下拉框：" style="display:inline-block;width:70%">
                        <el-select size="small" v-model="currentselectObj.currentInputData" style="width:100%;margin-right:15px;">
                            <el-option v-for="opt in currentselectObj.currentInputList" :key="opt.key" :label="opt.label" :value="opt.key"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button type="danger" round @click="delOptions()" :disabled="!currentselectObj.currentInputData" style="padding:8px 25px;margin-left:15px;">删除</el-button>
                </el-form>
                <el-row :span="24" style="text-align:right;margin-top:35px;">
                    <el-button type="info" round @click="closeInputDataModal()" style="padding:8px 25px;background:#a6a9ad;">取消</el-button>
                    <el-button type="primary" round @click="submitSelectData()" :disabled="currentselectObj.currentInputList.length < 1" style="padding:8px 25px;margin-left:15px;">确定</el-button>
                </el-row>
            </div>
        </modal>
        <modal :visible="styleModal" :width="1010" @close="styleModal = false" class="data-modal" title="样式设置">
            <styleSetting @sendiptVal='showChildMsg' :toChildData="configData"></styleSetting>
        </modal>
        <el-dialog
                top="40px"
                :visible="sfxLibraryVisibly"
                width="660px"
                title="特效库"
                @close="sfxLibraryVisibly = false"
                append-to-body
                custom-class="definedModal">
            <specialLibrary @selected="selectCurrentSpx" @close="sfxLibraryVisibly = false"></specialLibrary>
        </el-dialog>
    </div>
</template>
<script>
    import styleSetting from './styleSetting';
    import styleSettingTwo from './styleSettingTwo';
    import specialLibrary from '../../baseSetting/library/specialLibrary';
    import backgComponent from "@/pages/common/bgComponent";
    import bgImage from '../../../../../assets/imgs/fj.jpg';
    import screenList from './scrollScreenList';
    import dsConfig from '@/utils/dataSourceConfig';
    import { deepCopy } from '@/utils/util';
    import { getSSPosition,getAggrPostion } from '@/utils/position';
    import { configMerge } from '@/utils/pageConfig';
    import { generateNumberID } from '@/utils/util';
    export default {
        components: {
            styleSetting,
            styleSettingTwo,
            screenList,
            specialLibrary,
            backgComponent
        },
        props: ["sceneName"],
        provide(){  //以允许一个祖先组件向其所有子孙后代注入一个依赖
            return{
                modifi: this.openSettingDialog,
                delData: this.delSenceData
            }
        },
        data() {
            return {
                msg: '新建滚屏', //标识打开的模态框是新建还是修改
                // broadcastPlace:'',  //播报位置
                place:'',
                imgSrc: null,
                d3Config: null,
                screenHeight: 486,
                screenWidth: 1980,
                activeName: 1, //新建滚屏Tabs标识
                showSet: false, // 模态框设置项
                submitData:false,
                placeModal: false, //播报位置
                secondPlaceModal: false,
                // picLibraryVisibly: false,
                sfxLibraryVisibly: false,
                inputDataModal:false, //输入下拉框数据模态框
                styleModal: false, //样式设置弹框
                configData: {},
                pageidBigint: 36232,
                sourceData: {},
                screenElements:[],
                currentselectObj:{
                    currentInputList:[],
                    currentInputData:"",
                    selectName:"",
                    currenId:"",
                    currenInputType:""
                },
                initSourceData: {
                    fields: [], //字段
                    aggregation:[], // 聚合
                    bgImage:"",
                    d3Config:"",
                    screenEffect: {
                        name: '',
                    },
                    form: {
                        region:'',
                        type: '循环滚动',
                        broadcastPlace:dsConfig.placeList[0].text,
                        broadcastSrc: dsConfig.placeList[0].src,
                        zoom:'弹跳缓冲',
                        shrink:'',
                        speed:'中等',
                        scale:'2X',
                        direction:'由下至上',
                        effects:'无',
                        broadMsg:'',
                        isEnterData: false,
                        broadConfig: {},
                        noneBroadRem:{
                            content:'欢迎',
                            previewHtml:'', //输入的内容
                            realContent:'',
                            fontFamily: '微软雅黑',
                            fontColor: '#f6d320',
                            fontId: 60,
                            fontSize: 16,
                            isBold: true,
                            isItalic: false,
                            isUnderline: false,
                        }
                    }
                },//滚屏添加的字段
                aggreId:'',  //当前聚合id
                rules: {  //校验规则
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                    ],
                },
                checkedField: [], //选择的字段类型
                dataNum:1,
                dsConfig: dsConfig //字段类型
            }
        },
        created() { //初始化数据
            this.sourceData = deepCopy(this.initSourceData);
            // console.info(this.screenElements);
        },
        mounted() { 
            if(this.$route.path.indexOf('add') !== -1){ //判断是否为修改
                this.pageidBigint = null;
            }else{ 
                this.pageidBigint = this.$route.name                    
            }                       
            this.$bus.$on('latestData', (data) => { //获取最新数据
                this.screenHeight = data.scene.screenHeight;
                this.screenWidth =  data.scene.screenWidth;
                this.screenElements = deepCopy(data.elements);
                this.screenElements.find(ele => {
                    let element = deepCopy(ele);
                    if(element.type ==="3"||element.type ===3){
                        this.d3Config = element.properties.d3Config;
                        this.imgSrc = element.properties.imgSrc;
                        return true
                    }
                })
                // console.info(this.screenElements);
                this.dataNum = data.num
            })
        },
        methods:{
            // 图片库选择结果
            selectCurrentImg(data) {
                this.imgSrc = data.url;
            },
            bgChange(data, url){
                this.imgSrc = url;
                this.d3Config = data;
            },            
            // 特效库选择结果
            selectCurrentSpx(data) {},
            nextStep(field){  //下一步
                // console.info(this.sourceData.fields);
                this.$refs[field].validate((valid) => {
                    if (!valid) {
                        return false;
                    }else{
                        this.activeName = 2
                    }
                });
            },
            cancel(){
                console.info(this.screenElements,"取消",this.sourceData);
                this.showSet = false;this.activeName = 1;
                this.$refs.screenList.screenDataList.elements = deepCopy(this.screenElements);
                this.$refs.screenList.disposeData(); //子页处理数据
            },
            openSettingDialog(modifi,sourceData){  //打开设置滚屏模态框
                // console.info(screenData.id);
                this.showSet = true;
                if(modifi === true){
                    this.msg = "修改滚屏设置"
                    if(sourceData){
                        this.sourceData = Object.assign({}, sourceData)
                        // console.info(this.sourceData.id);
                    }
                }else{
                    this.msg = "新建滚屏";
                    this.initSourceData.id = generateNumberID();
                    this.initSourceData.fields = [];
                    this.initSourceData.aggregation = [];
                    this.initSourceData.form.name ="";
                    this.sourceData = deepCopy(this.initSourceData);
                }
            },
            openSecondPlaceModal(a,aggreId,name){ //打开位置选择模态框
                this.secondPlaceModal = true;
                this.aggreId = aggreId;
                this.place = name;
            },
            openStyleModal(type,config,index,fields,fieldsFlag){  //定义样式弹框
                this.styleModal = true;
                if(type===1){ //滚屏
                    this.sourceData.form.broadConfig.type = type;
                    this.configData = this.sourceData.form.broadConfig;
                    this.configData.fields = this.sourceData.fields;
                }else{ //聚合
                    let param = {};
                    param.id = index;
                    param.type = type; 
                    param.fields = fields;
                    param.fieldsFlag = fieldsFlag;
                    if(config){
                        param.domains = config
                    }else{
                        param.domains = []
                    }
                    this.configData = param;
                }
            },
            openInputModal(currentList,currenId,type){
                this.inputDataModal = true;
                this.currentselectObj.currenId = currenId;
                this.currentselectObj.currentInputList = [];
                this.currentselectObj.currentInputList = deepCopy(currentList);
                this.currentselectObj.currenInputType = type;
                // console.info(currentList);
            },
            delOptions(){
                console.info(this.currentselectObj.currentInputData,"删除",this.currentselectObj.currentInputList);
                if(this.currentselectObj.currentInputData){                    
                    this.currentselectObj.currentInputList.splice(this.currentselectObj.currentInputList.findIndex(item => item.key === this.currentselectObj.currentInputData), 1)
                    this.currentselectObj.currentInputData = null;
                }                
            },
            addOptions(){
                if(this.currentselectObj.selectName===""){
                    this.$message.warning('请输入内容！');
                    return;
                }
                let flag = this.currentselectObj.currentInputList.find(f => {
                    return f.label === this.currentselectObj.selectName 
                })
                if(flag){
                    this.$message.warning('选项名称不能重复！');
                    return;
                }
                let options = {};
                options.key = this.currentselectObj.currentInputList.length+1;
                options.label = this.currentselectObj.selectName;
                this.currentselectObj.currentInputList.push(options);
                this.currentselectObj.selectName = "";
                // console.info(this.currentselectObj.currentInputList);
            },
            submitSelectData(){
                this.sourceData.fields.find(f => {
                    if(f.id === this.currentselectObj.currenId){
                        f.inputDataList = this.currentselectObj.currentInputList;
                        f.inputData = this.currentselectObj.currentInputData;
                        this.closeInputDataModal();
                        return true;
                    }
                })
            },
            closeInputDataModal(){
                this.currentselectObj.currenId = "";
                this.currentselectObj.currentInputList = [];
                this.currentselectObj.selectName = "";
                this.inputDataModal = false;
            },
            showChildMsg(val){  // 获取录入的内容样式
                console.info(val,"子页面数据");
                if(val.type === 1){
                    this.sourceData.form.broadConfig = val;
                    this.sourceData.form.broadMsg = val.previewHtml;
                }else{ //为聚合函数时
                    let source = this.sourceData.aggregation;
                    source.forEach((aggr, index) => {
                        if (index === val.index) {
                            aggr.domains = val.domains;
                            aggr.previewHtml = val.previewHtml;
                            aggr.realContent = val.realContent;
                        }
                    })
                }
                this.styleModal = false;
            },
            // perviewMsg(val){},
            setAggreType(flag,id){ //设置聚合数据类型
                let result = this.sourceData.fields.find(item => {
                    return item.id === flag;
                });
                if(result){
                    this.sourceData.aggregation.find(agg => {
                        if(agg.id === id){
                            agg.fieldOptions = result.fieldOptions;
                            agg.fieldName = result.name;
                            return true;
                        }
                    });
                }
            },
            setFeldsType(name, id){
                let source = this.sourceData.aggregation;
                source.find(agg => {
                    if(agg.id === id){
                        agg.fieldsType = name;
                        return true;
                    }
                })
            },
            placeChoice(name,type,src){ //位置选择
                if(type){
                    this.sourceData.form.broadcastPlace = name
                    this.sourceData.form.broadcastSrc = src
                }else{
                    let source = this.sourceData.aggregation;
                    source.forEach((so, i) => {
                        if (so.id === this.aggreId) {
                            so.fieldsPosition = name;
                            so.icon = src
                        }
                    })
                }
            },
            addField() { //新增字段
                // console.info(this.sceneName,this.$route.query.sceneId);
                let f = {
                    id: this.generateNumbID(),
                    name: '',
                    fieldOptions: 'text',
                    requisite: false,
                    inputType:"text",
                    inputData:"",
                    inputDataList:[]
                };
                this.sourceData.fields.push(f);
            },
            addAggreFields() { //新增聚合
                let f = {
                    id: generateNumberID(),
                    fieldsType: '汇总',
                    ctype:'508',
                    fieldsPosition:'默认',
                    fieldOptions:this.sourceData.fields[0].fieldOptions,
                    icon: dsConfig.places[0].icon
                };
                this.sourceData.aggregation.push(f);
            },
            onSubmit(field) { //提交滚屏设置
                this.$refs[field].validate((valid) => {
                    if (!valid) {
                        this.$message.warning('请输入名称');
                        return false;
                    }else{
                        this.submitData = true;
                        // console.info(this.sourceData,this.sceneName,this.$route.query.sceneId,this.$route.name);
                        let modifi = false,
                            fie = this.sourceData.fields,
                            source = this.sourceData.aggregation,elements=[],
                            num=source.length,reg = /,$/gi;
                        fie.forEach((f, i) => {
                            let elem = {ctype:null};
                                elem.id = f.id; //字段的Id
                                elem.name = f.name;
                            source.forEach((agg, i) => {                                
                                if(f.id===agg.fieldsFlag){
                                    console.info(agg.ctype);
                                    if(agg.ctype !== undefined){                                        
                                        elem.ctype =+ agg.ctype + ",";
                                    }else{
                                        agg.ctype = null;
                                        // elem.ctype =+ agg.ctype + ",";
                                    }
                                    // if(Number.isNaN(agg.ctype)){}                                                                        
                                }
                            })
                            if(elem.ctype!==null)(elem.ctype = elem.ctype.replace(reg,""))
                            elements.push(elem);
                        })
                        this.sourceData.elements = elements;
                        let cssStyle = configMerge();
                        if(this.sourceData.type==="ss" && this.sourceData.css !== undefined){
                            if(cssStyle.css.height === this.sourceData.css.height && cssStyle.css.width === this.sourceData.css.width&&cssStyle.css.left === this.sourceData.css.left&&cssStyle.css.top === this.sourceData.css.top){
                                let WHs = getSSPosition(this.sourceData.form.broadcastPlace,this.screenHeight,this.screenWidth);
                                this.sourceData.css.width = WHs.width;
                                this.sourceData.css.height = WHs.height;
                                this.sourceData.css.left = WHs.left;
                                this.sourceData.css.top = WHs.top; 
                            }
                        }
                        // console.info(this.screenElements);
                        this.screenElements.forEach((elem, i) => {
                            this.screenElements[i].elements ? this.screenElements[i].elements : this.screenElements[i].elements = [];
                            this.screenElements[i].properties?this.screenElements[i].properties:this.screenElements[i].properties = {};
                            if(elem.id && elem.id === this.sourceData.id){
                                this.screenElements[i] = Object.assign({},this.sourceData); //修改时
                                this.screenElements[i].properties?this.screenElements[i].properties:this.screenElements[i].properties = {};                                
                                modifi = true
                            }
                        });
                        this.savePage(modifi);
                    }
                });
            },
            //保存数据           
            savePage(modifi, modifiType, lis, goTpshow){
                console.info("保存！！",this.screenElements);
                if(this.$route.path.indexOf('add') !== -1){ //判断是否为修改
                    this.pageidBigint = null;
                }else{ 
                    this.pageidBigint = this.$route.name                    
                }
                if(!modifi || this.screenElements.length===1 && this.screenElements[0].type==="3" && !modifi){
                    this.sourceData = deepCopy(configMerge(this.sourceData));
                    this.sourceData.pageId = this.pageidBigint;
                    this.sourceData.sceneId = this.$route.query.sceneId;
                    WidHei = getSSPosition(this.sourceData.form.broadcastPlace,this.screenHeight,this.screenWidth);
                    this.sourceData.type = "ss";
                    this.sourceData.css.width = WidHei.width;
                    this.sourceData.css.height = WidHei.height;
                    this.sourceData.css.top = WidHei.top;
                    this.sourceData.css.left = WidHei.left;
                    this.screenElements.push(this.sourceData);
                }                
                let formData =  {
                    sceneid: this.$route.query.sceneId, //场景号
                    name: this.sceneName, //场景页名
                    pageidBigint: this.pageidBigint,  //场景页主键修改时传
                    elements: lis != undefined ? lis : this.screenElements,  //（存储基础信息List
                    pageType: 4    //页类型，参数自己定义区分出四个基本页）
                },WidHei;
                // formData.elements = this.unique(formData.elements); //数组去重
                //将聚合拆分成组件
                var index,bgIndex;
                index = formData.elements.findIndex(item => item.type === "aggr")
                while(index !== -1){
                    formData.elements.splice(index, 1)
                    index = formData.elements.findIndex(item => item.type === "aggr")
                }
                let ssElements = deepCopy(formData.elements);
                ssElements.forEach((sss, i) => {
                    if(sss.aggregation && sss.aggregation.length>0){
                        const ssWidth = sss.css.width,ssHeight = sss.css.height,ssLeft = sss.css.left,ssTop=sss.css.top;
                        sss.aggregation.forEach((aggr, a) => {                            
                            if(aggr.css===undefined){ //新建时
                                aggr = deepCopy(configMerge(aggr));
                                aggr.css.width=200;
                                aggr.css.height=100;
                            }                                                        
                            let ssPlace = {height:ssHeight,width:ssWidth,left:ssLeft,top:ssTop}
                            let aggrWH = getAggrPostion(aggr.fieldsPosition,this.screenHeight,this.screenWidth,ssPlace,aggr.css.width,aggr.css.height); 
                                // console.info(aggrWH);                               
                            aggr.type= "aggr";                            
                            aggr.pageId = this.pageidBigint;
                            aggr.sceneId = this.$route.query.sceneId;
                            aggr.css.left = aggrWH.left;
                            aggr.css.top = aggrWH.top;
                            aggr.css.zIndex = i + a;
                            formData.elements.push(aggr);
                        })
                    }
                })
                bgIndex = formData.elements.findIndex(b => b.type === 3||b.type === '3')
                if(bgIndex !== -1){
                    formData.elements[bgIndex].properties.imgSrc = this.imgSrc;
                    formData.elements[bgIndex].properties.d3Config = this.d3Config;
                }else{
                    // formData.elements.splice(formData.elements.findIndex(b => b.type == '3'), 1)
                    // 判断是否选择了背景图,选择了背景图则在elements中添加背景组件
                    if (this.imgSrc||this.d3Config) {
                        var bgConfig = {
                            sceneId: this.$route.query.sceneId,
                            pageId: this.pageidBigint,
                            id: generateNumberID(),
                            type: '3',
                        };
                        // console.info(configMerge(bgConfig));
                        let bgC = deepCopy(configMerge(bgConfig))
                        bgC.properties.imgSrc = this.imgSrc;
                        bgC.properties.d3Config = this.d3Config;
                        formData.elements.push(bgC);
                    }
                }                
                // 保存滚屏设置
                let _this = this;
                this.$api.post('/stScenepage/savePage',formData, response => {
                    this.$message({
                        message: "操作成功",
                        type: 'success'
                    });
                    this.showSet = false;
                    this.submitData = false;
                    this.activeName = 1
                    if(goTpshow){
                        this.toShow();
                    }
                    if(this.$route.path.indexOf('add') === -1 && modifiType !== "alterName" ){ //判断是否为
                        _this.$refs.screenList.selectSceneData();
                    }else if(this.$route.path.indexOf('add') !== -1 || modifiType === "alterName"){
                        console.info(modifiType,'修改类型');
                        _this.$bus.$emit('menuRefresh', _this.$route.path, response)
                    }
                }, fal => {
                    this.submitData = false;
                    this.$message.error(fal);
                });
            },
            delSenceData(id){ //删除场景数据
                this.$confirm(`确定删除所选滚屏数据?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    customClass: 'myProp',
                }).then(() => {
                    let modifi = true;
                    this.screenElements.splice(this.screenElements.findIndex(item => item.id === id), 1)
                    // console.info(this.screenElements);
                    this.savePage(true);
                }).catch(() => {
                });
            },
            delField() { //删除字段
                this.$confirm(`确定删除所选字段?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    customClass: 'myProp',
                }).then(() => {
                    let source = this.sourceData;
                    let arr = deepCopy(source.fields);
                    this.checkedField.forEach((id) => {
                        let sResult = this.sourceData.aggregation.find(item => {
                            return item.fieldsFlag === id;
                        });
                        if(sResult){
                            this.$message.warning('请先删除相关联的聚合字段');
                            throw new Error('请先删除相关联的聚合字段');
                        }
                        source.fields.forEach((item, index) => {
                            if (item.id === id) {
                                arr.splice(arr.findIndex(f => f.id === id), 1)
                            }
                        });
                    });
                    this.sourceData.fields = arr;
                    this.checkedField = [];
                }).catch(() => {
                });
            },
            remind(){             
                
            },
            delAggre(id){ //删除聚合
                this.$confirm(`确定删除所选聚合?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    customClass: 'myProp',
                }).then(() => {
                    let source = this.sourceData;
                    let arr = deepCopy(source.aggregation);
                    arr.splice(arr.findIndex(so => so.id === id), 1)
                    this.sourceData.aggregation = arr;
                }).catch(() => {
                });
            },
            generateNumberID() { //生产随机id
                return parseInt( ''+ +new Date()+ parseInt(Math.random() * 10) );
            },
            generateNumbID(){
                return parseInt(''+ +new Date().getHours() + new Date().getYear() + new Date().getMinutes() + parseInt(Math.random() * 100))
            },
            unique(arr) {
                const res = new Map();
                return arr.filter((a) => !res.has(a) && res.set(a, 1))
            } ,
            goToShow() {
                this.savePage(true, undefined, undefined, true);
            },
            toShow() {
                // 点击高级编辑，跳转到老编辑器
                var {origin} = window.location;
                if(origin.indexOf("10.28.186.22") > -1){ //origin.indexOf("127.0.0") > -1||origin.indexOf("localhost") > -1 ||
                    //测试环境
                    origin = "http://10.28.186.22:7001"
                }else {
                    //150环境
                    origin = "https://office2.cn"
                }
                this.$nextTick(() => {
                    let token = sessionStorage.getItem('token');
                    var url = `${ origin }/staticft/#/scene/create/${
                        this.$route.query.sceneId
                        }?pageId=${this.dataNum || 1}&type=smartscreen&token=${token}`;
                    window.location.replace(url);
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .basicPart{
        width: 100%;
        height: 100%;
        margin-top:15px;
        a{
            margin-right: 20px;
            font-size: 12px;
        }
        .el-tabs__content{
            padding: 5px 10px !important;
        }
        .el-row{
            margin: 15px 0px;
        }
        .vertical-top {
            button {
                vertical-align: top;
            }
            .img-container {
                width: 160px;
                min-height: 80px;
                border: 1px solid #eee;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                margin-right:15px;
                .bg-img {
                    max-width: 160px;
                }
                span {
                    color: #afafaf;
                }
            }
            .effect-name{
                color: #373737;
                margin-right:15px;
            }
        }
        .el-divider--horizontal:last-child{
            margin-bottom: 5px;
        }
        .data-modal{
            z-index: 3;
        }
        .reminder{
            font-size: 12px;
            color: #afafaf;
        }
        .newScrollScreen1{
            padding: 9px 20px;
            color:#1994fa;
            border-color:#1994fa;
        }
        .newScrollScreen2{
            padding: 9px 20px;
            color:#d93025;
            border-color:#d93025;
        }
        .newScrollScreen{
            padding: 10px 25px;
            margin:5px 20px;
        }
        .ss-bangzhu{
            color:#909399;
            font-size: 14px;
        }
        .el-dialog__body{
            padding:7px 20px 30px 20px;
        }
        .showFont .el-row{
            margin-left: 15px;

        }
        .showFont .el-row:last-child .el-col .el-divider--horizontal{
            display: none;
        }
        .el-tabs__nav{
            z-index: 1;
        }

        .el-divider--horizontal{
            margin-top: 5px;
        }
        .functionSetting{
            margin-top:10px;
        }
        .cardShadow{
            background: #f5f7fa;
            border-radius:10px;
            padding: 20px 15px 0px 0px;
            .el-form-item__label{
                text-align: center;
            }
        }
        .broadMsg{
            margin-bottom: 10px;
        }
        .el-select-dropdown__item{
            padding:0px 15px;
        }
        .el-tabs--card > .el-tabs__header{
            margin-bottom: 0px;
        }
        #btsAreaPos,#btsAreaPos1{
            .el-radio{
                display: block;
                padding-top: 0px;
                text-align: center;
                position: relative;
                margin: 15px auto 5px;
            }
        }
        #btsAreaPos1{
            .icon {
                display: block;
                width: 115px;
                height: 75px;
                fill: currentColor;
                overflow: hidden;
                margin-left: 0px;
            }
            .el-radio{
                margin: 15px auto 10px;
            }
        }
        #btsAreaPos{
            .el-radio-group{
                img{
                    position: absolute;
                    left: 3px;
                    top: 0px;
                }
            }
        }
        .inputDataModal{
            width: 70%;
            margin: 15px auto 30px auto;
            // .inputName{
            // }
        }
    }

</style>